<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title>

    <link rel="stylesheet" href="$!basePath/framework/plugins/stepy/jquery.stepy.css">
    #required_css
    <link rel="stylesheet" href="$!basePath/framework/css/ext/stepy.css">
</head>

<body>#loading


<div class="app $!layout">
    <!-- 头部菜单 -->
    #header
    <section class="layout">
        <!-- 菜单 -->
        #sidebar
        <!-- 内容主体 -->
        <section class="main-content">
            <!-- 主体操作栏 -->
            <header class="header navbar">
                <!-- 左按钮区 -->
                <div class="btn-group tool-button">
                    <a class="btn btn-primary navbar-btn" href="$!basePath/system/role" data-pjax><i class="ti-angle-left"></i> 返回</a>
                </div>
                <!-- 右按钮区 -->
                <div class="pull-right">
                    <div class="btn-group tool-button">
                        <a class="btn btn-primary navbar-btn" href="$!basePath/system/role/edit/$!role.id" data-pjax>修改基本信息 <i class="ti-angle-right"></i></a>
                    </div>
                </div>
            </header>
            <div class="content-wrap">
                <div class="wrapper">
                    <section class="panel">
                        <header class="panel-heading">
                            <h4>重新设置角色权限</h4>
                        </header>
                        <div class="panel-body">
                            <form id="roleRightEditForm" role="form" class="form-horizontal stepy hidden" data-parsley-validate action="$!basePath/system/role/edit/doRight" method="post">
                                <input type="hidden" name="id" value="$!role.id"/>
                                <input type="hidden" name="resourceIds"/>
                                <input type="hidden" name="resourceColIds"/>
                                <fieldset title="第 1 步&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                                    <legend>重新分配菜单</legend>
                                    <div class="form-group no-b">
                                        <div class="col-sm-8">
                                            <div class="panel">
                                                <div class="panel-heading no-b">
                                                    <h5>选择<b>菜单</b></h5>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="jsTreeMenu"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="panel">
                                                <div class="panel-heading no-b">
                                                    <h5>菜单<b>描述</b></h5>
                                                </div>
                                                <div id="menuDescript" class="panel-body">
                                                    <div class='alert alert-info'>鼠标在左侧菜单树节点上悬浮，可以查看菜单描述</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset title="第 2 步&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                                    <legend>修改按钮权限</legend>
                                    <div class="form-group no-b">
                                        <div class="col-sm-12">
                                            <section class="panel no-b">
                                                <div class="panel-heading no-b">
                                                    <h5><span id="menuName">菜单</span><b>按钮权限</b></h5>
                                                    <div id="checkAllMenuBtn" class="pull-right">
                                                        <label for="selectAllBtn">全选：&nbsp;&nbsp;&nbsp;</label>
                                                        <input type="checkbox" id="selectAllBtn" class="js-switch-blue"/>
                                                    </div>
                                                </div>
                                                <div id="divResBtn" class="panel-body">
                                                    <!-- 根据选择的菜单动态生成 -->
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset title="第 3 步&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                                    <legend>修改字段权限</legend>
                                    <div class="form-group no-b">
                                        <div class="col-sm-12">
                                            <section class="panel no-b">
                                                <div class="panel-heading no-b">
                                                    <h5><span id="menuColumnsName">菜单</span><b>字段权限</b></h5>
                                                    <div id="checkAllMenuColumns" class="pull-right">
                                                        <label for="selectAllBtn">全选：&nbsp;&nbsp;&nbsp;</label>
                                                        <input type="checkbox" id="selectAllColumns" class="js-switch-blue"/>
                                                    </div>
                                                </div>
                                                <div id="divResColumns" class="panel-body">
                                                    <!-- 根据选择的菜单动态生成 -->
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </fieldset>
                                <button class="stepy-finish btn btn-primary pull-right" data-loading-text="正在提交...">完成</button>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
            <a class="exit-offscreen"></a>
        </section>
    </section>
</div>
<!-- 提示 -->
<div id="dialogTip" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content no-b">
            <div class="modal-body no-p">
                <div class="row">
                    <div class="col-xs-12">
                        <section class="panel panel-warning no-b">
                            <header class="panel-heading clearfix">
                                <div class="overflow-hidden">
                                    <a href="javascript:;" class="h4 show no-m pt5"><i class="$!res.icon"></i> 重新分配角色权限</a>
                                    <small>重新分配菜单对当前角色下属所有用户生效，请谨慎操作！</small>
                                </div>
                            </header>
                            <div class="panel">
                                <div class="panel-heading no-b">
                                    <h5>您有必要知道一下几点：</h5>
                                </div>
                                <div class="panel-body">
                                    <ul>
                                        <li>重新分配菜单对当前角色下属所有用户的立即生效.</li>
                                        <li>鼠标悬浮在菜单上，可以从右侧看到菜单功能描述.</li>
                                        <li>仅在展开父菜单，下属菜单才有可能被选择.</li>
                                    </ul>
                                    <hr>
                                    <ol>
                                        <li>点击左侧菜单树，选择菜单后点击下一步！</li>
                                        <li>对已经选择的菜单分配设置按钮权限.</li>
                                        <li>点击右下角完成按钮，系统提示“角色权限修改成功”即表示操作成功.</li>
                                    </ol>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning btn-block" onclick="$('#dialogTip').modal('hide');init();">我知道了</button>
            </div>
        </div>
    </div>
</div>
#required_js

<!-- 页面组件脚本 -->
<script src="$!basePath/framework/plugins/switchery/switchery.js"></script>
<script src="$!basePath/framework/plugins/stepy/jquery.validate.min.js"></script>
<script src="$!basePath/framework/plugins/stepy/jquery.stepy.js"></script>

<!-- 本页面脚本 -->
<script src="$!basePath/framework/js/form/form.js"></script>
<script src="$!basePath/framework/js/view/toast.js"></script>
<script src="$!basePath/framework/js/plugins/json.js"></script>
<script src="$!basePath/framework/js/view/tree.js"></script>
<script src="$!basePath/framework/js/form/select.js"></script>
<script src="$!basePath/framework/js/form/validator.js"></script>
<script src="$!basePath/framework/js/form/checkbox.js"></script>
<script type="text/javascript">
    $(function () {
        //判断是否已经提示，如果已经提示，则下次不再弹出
        if(!ns.data.localStorage.get("edit_right")){
            setTimeout(function () {
                $("#dialogTip").modal("show");
                ns.data.localStorage.set("edit_right", true);
            }, 200);
        }else{
            init();
        }
    });
    function init() {
        //初始化选择菜单树
        $("#jsTreeMenu").jstree({
            plugins: ["wholerow", "checkbox"],
            core: {
                data: {
                    url: function (node) {
                        return node.id === "#" ? "$!basePath/system/role/unit/res/tree/$!role.unit.id" : "$!basePath/system/role/unit/res/tree/$!role.unit.id/" + node.id
                    }
                }
            },
            checkbox: {
                three_state: false,
                cascade: 'down'
            }
        }).on("hover_node.jstree", function (e, data) {
            if (!data.node.data)
                data.node.data = "";
            $("#menuDescript").text(data.node.data);
        }).on("dehover_node.jstree", function (e, data) {
            $("#menuDescript").html("<div class='alert alert-info'>鼠标在左侧菜单树节点上悬浮，可以查看菜单描述</div>");//清空菜单描述
        }).on("loaded.jstree", function () {
            //立即加载树下所有节点， 并选中已选择的菜单
            $("#jsTreeMenu").jstree("load_all");
        }).bind("load_all.jstree", function () {
            var data = $
            !data;
            ;
            var tree = $("#jsTreeMenu");
            $.each(data, function (i, n) {
                tree.jstree(true).select_node(n);
            });
            tree.focus();
        });
        $(".stepy").stepy({
            backLabel: "上一步",
            nextLabel: "下一步",
            errorImage: true,
            block: true,
            validate: true,
            legend: false,
            select: function (idx) {
                if (idx == 2) {
                    //获取所选菜单
                    var tree = $.jstree.reference("#jsTreeMenu");
                    var nodes = tree.get_selected();
                    //查询所选节点的所有父节点
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];

                        each(node, tree, nodes);
                    }
                    if (nodes.length > 0) {
                        $("#checkAllMenuBtn").show();
                        $("#divResBtn").html("<img src='$!basePath/framework/img/loading.gif'/>正在加载...");
                        $.get("$!basePath/system/role/edit/right/resbtn", {roleId: '$!role.id', ids: nodes.toString()}, function (html) {
                            $("#divResBtn").html(html);
                        });
                    } else {
                        $("#divResBtn").html("<div class='alert alert-warning'>未分配任何菜单，如需分配菜单权限，请到第2步中选择菜单！</div>");
                        $("#checkAllMenuBtn").hide();
                    }
                } else if (idx == 3) {
                    //获取所选菜单
                    var tree = $.jstree.reference("#jsTreeMenu");
                    var nodes = tree.get_selected();
                    //查询所选节点的所有父节点
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];

                        each(node, tree, nodes);
                    }
                    if (nodes.length > 0) {
                        $("#checkAllMenuColumns").show();
                        $("#divResColumns").html("<img src='$!basePath/framework/img/loading.gif'/>正在加载...");
                        $.get("$!basePath/system/role/edit/right/rescol", {roleId: '$!role.id', ids: nodes.toString()}, function (html) {
                            $("#divResColumns").html(html);
                        });
                    } else {
                        $("#divResColumns").html("<div class='alert alert-warning'>未分配任何菜单，如需分配菜单权限，请到第2步中选择菜单！</div>");
                        $("#checkAllMenuColumns").hide();
                    }
                }
            }, finish: function () {
                //保存上一步的数据
                var resourceBtns = [], resourceCols = [];

                var objs = $("#divResBtn .res-btn");
                $.each(objs, function (i, row) {
                    row = $(row);
                    var res = new JSONObject();
                    res.put("id", row.attr("name"));

                    var btnArr = [];
                    var btns = row.find("input[type='checkbox']:checked");
                    for (var i = 0; i < btns.length; i++) btnArr.push(btns[i].value);
                    res.put("btns", "[" + btnArr.toString() + "]");

                    resourceBtns.push(res.toString());
                });
                objs = $("#divResColumns .res-col");
                $.each(objs, function (i, row) {
                    row = $(row);
                    var res = new JSONObject();
                    res.put("id", row.attr("name"));

                    var colArr = [];
                    var cols = row.find("input[type='checkbox']:checked");
                    for (var i = 0; i < cols.length; i++) colArr.push(cols[i].value);
                    res.put("cols", "[" + colArr.toString() + "]");

                    resourceCols.push(res.toString());
                });

                $("#roleRightEditForm input[name='resourceIds']:hidden").val(resourceBtns.toString());
                $("#roleRightEditForm input[name='resourceColIds']:hidden").val(resourceCols.toString());
            }
        });
        //表单ajax提交
        $("#roleRightEditForm").ajaxForm({
            beforeSubmit: function (arr, $form, options) {
                //获取选择的菜单
                $form.find("button:submit").button("loading");
                if ($form.attr("isSubmit") == undefined) {//与stepy结合使用时，要避免二次提交的问题
                    $form.attr("isSubmit", true);
                } else {
                    $form.removeAttr("isSubmit");
                    return false;
                }
            },
            success: function (data, statusText, xhr, $form) {
                if (data.success == true) {
                    Toast.success("角色权限修改成功，3秒后返回角色管理首页", function () {
                        //返回上级菜单
                        window.location.href = "$!basePath/system/role";
                    });
                    setTimeout(function () {
                        //返回上级菜单
                        window.location.href = "$!basePath/system/role";
                    }, 3000);
                } else {
                    Toast.error(data.error);
                }
                $form.find("button:submit").button("reset");
            }
        });
        //显示界面
        $("#roleRightEditForm").removeClass("hidden");

        //绑定全选事件
        $("#selectAllBtn").on("change", function () {
            if ($(this).is(":checked")) {
                $("#divResBtn .icheck").iCheck("check");
            } else {
                $("#divResBtn .icheck").iCheck("uncheck");
            }
        });
        $("#selectAllColumns").on("change", function () {
            if ($(this).is(":checked")) {
                $("#divResColumns .icheck").iCheck("check");
            } else {
                $("#divResColumns .icheck").iCheck("uncheck");
            }
        });
        ;
    }
    function each(node, tree, nodes) {
        var p = tree.get_parent(node);
        if (p.length > 1) {
            if (!isExists(p, nodes))
                nodes.push(p);
            each(p, tree, nodes);
        }
    }
    function isExists(p, nodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (p == nodes[i])
                return true;
        }
        return false;
    }
</script>
#loading_close
</body>
</html>
